import { Descriptions, Image, Card, Upload, Button } from 'antd'
import { connect } from 'react-redux'
import Cookie from 'js-cookie'

const My = (props) => {

    const { userInfo, dispatch } = props;

    // 上传文件的过程
    const changeFile = (file) => {
        if(file.file.response) {
            // 上传成功
            dispatch({type: 'CHANGE_USER_IMG', data: file.file.response.data.url})
        }
        console.log(file)
    }

    return <div>
        <Card>
            <Descriptions title="用户信息" column={2}>
                <Descriptions.Item label="头像"><Image src={userInfo.avatar_url} style={{ width: 100, height: 100, borderRadius: "50%" }} /></Descriptions.Item>
                <Descriptions.Item label="姓名">{userInfo.name}</Descriptions.Item>
                <Descriptions.Item ></Descriptions.Item>
                <Descriptions.Item>
                    <Upload
                        name='file'
                        action="/api/upload" // 上传图片的路径
                        onChange={changeFile}
                        headers={{
                            Authorization: Cookie.get('token')
                        }}
                    >
                        <Button>点击更改头像</Button>
                    </Upload>
                </Descriptions.Item>

            </Descriptions>
        </Card>

    </div>
}

const mapStateToProps = state => state

export default connect(mapStateToProps)(My)
